<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            margin:0;
            padding:0;
            margin:100px auto;
        }
    ul li{
        list-style:none;
        border:1px solid #ccc;
        padding:30px;
        box-shadow:0px 0px 5px 0px #000;
        float:left;
        margin-right:20px;
        width:280px;
        text-align:center;
    }
    ul li p{
        font-size:20px;
    }
    ul li p span{
        color:red;
    }
    ul li img{
        width:100%;
    }
    </style>
</head>
<body>
    <button id="btn1">根据价格排序</button>
    <button id="btn2">根据评价排序</button>
    <button id="btn3">根据销量排序</button>
    <ul id="list">
        <!-- 用js渲染数据HTML内容-->
        <!-- <li>
            <p><img src="./images/honor7.jpg" alt=""></p>
            <p>Note7</p>
            <p>颜色:黑色</p>
            <p>原价:2599.00 </p>
            <p>现价：<span>2388.00</span></p>
            <p>评价:300</p>
            <p>销量:1268</p>
           </li>
           <li>
            <p><img src="./images/honor7.jpg" alt=""></p>
            <p>Note7</p>
            <p>颜色:黑色</p>
            <p>原价:2599.00 </p>
            <p>现价：<span>2388.00</span></p>
            <p>评价:300</p>
            <p>销量:1268</p>
           </li>
           <li>
            <p><img src="./images/honor7.jpg" alt=""></p>
            <p>Note7</p>
            <p>颜色:黑色</p>
            <p>原价:2599.00 </p>
            <p>现价：<span>2388.00</span></p>
            <p>评价:300</p>
            <p>销量:1268</p>
           </li>
           <li>
            <p><img src="./images/honor7.jpg" alt=""></p>
            <p>Note7</p>
            <p>颜色:黑色</p>
            <p>原价:2599.00 </p>
            <p>现价：<span>2388.00</span></p>
            <p>评价:300</p>
            <p>销量:1268</p>
           </li> -->
     </ul>
   <script>
       var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];
        // 根据价格排序
        // data.sort(function(a,b){
            // 根据对象的sale属性排序
            // return a.sale-b.sale
        // })
        // 利用for循环添加内容
        // for(var i=0;i<data.length;i++){
        //     list.innerHTML +='<li>'+
        //     '<p><img src="'+data[i].imgurl+'" alt=""></p>'+
        //     '<p>'+data[i].name+'</p>'+
        //     '<p>颜色:'+data[i].color+'</p>'+
        //     '<p>原价:'+data[i].price+' </p>'+
        //     '<p>现价：<span>'+data[i].sale+'</span></p>'+
        //     '<p>评价:'+data[i].evaluate+'</p>'+
        //     '<p>销量:'+data[i].sales+'</p>'+
        //    '</li>'
        // }
        function fn(data){
            for(var i=0;i<data.length;i++){
            list.innerHTML +='<li>'+
            '<p><img src="'+data[i].imgurl+'" alt=""></p>'+
            '<p>'+data[i].name+'</p>'+
            '<p>颜色:'+data[i].color+'</p>'+
            '<p>原价:'+data[i].price+' </p>'+
            '<p>现价：<span>'+data[i].sale+'</span></p>'+
            '<p>评价:'+data[i].evaluate+'</p>'+
            '<p>销量:'+data[i].sales+'</p>'+
           '</li>'
        }
        }
        fn(data)
        // 循环给按钮绑定点击事件 给价格排序
        var btn1=document.getElementById('btn1')

        btn1.onclick=function(){
            data.sort(function(a,b){
                return a.sale - b.sale
            })
            list.innerHTML=""
        //     for(var i=0;i<data.length;i++){
        //     list.innerHTML +='<li>'+
        //     '<p><img src="'+data[i].imgurl+'" alt=""></p>'+
        //     '<p>'+data[i].name+'</p>'+
        //     '<p>颜色:'+data[i].color+'</p>'+
        //     '<p>原价:'+data[i].price+' </p>'+
        //     '<p>现价：<span>'+data[i].sale+'</span></p>'+
        //     '<p>评价:'+data[i].evaluate+'</p>'+
        //     '<p>销量:'+data[i].sales+'</p>'+
        //    '</li>'

        // }
        fn(data)
        }
// 循环给按钮绑定点击事件 用评价排序
var btn2=document.getElementById('btn2')

        btn2.onclick=function(){
            data.sort(function(a,b){
                return a.evaluate - b.evaluate
            })
            list.innerHTML=""
            fn(data)
        }
        // 循环给按钮绑定点击事件 用销量排序
        var btn3=document.getElementById('btn3')

        btn3.onclick=function(){
            data.sort(function(a,b){
                return a.sales - b.sales
            })
            list.innerHTML=""
            fn(data)
        }       
   </script> 
</body>
</html>